<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="基础数据管理" name="first">
        <el-form ref="mainForm" size="medium" :model="formData" :rules="rules" label-width="100px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="formData.name" placeholder="名称" clearable />
          </el-form-item>
          <el-form-item label="设备图片">
            <img-upload
              name="project"
              :image-url="imageUrl"
              @onSuccess="onSuccess"
              @beforeUpload="beforeUpload"
            />
          </el-form-item>
          <el-form-item label="是否显示">
            <el-switch v-model="formData.map_show" :active-value="1" inactive-value="0" />
          </el-form-item>
          <el-form-item label="中心位置">
            <el-input v-model="center" placeholder="地图中心点位置经纬度" class="input-with-select">
              <el-button slot="append" icon="el-icon-s-promotion" @click="openPoiContainer">选择所在位置</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="描述" prop="descri">
            <el-input v-model="formData.descri" rows="4" placeholder="描述" type="textarea" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit('mainForm')">提交</el-button>
            <el-button @click="reset('mainForm')">重置</el-button>
          </el-form-item>
        </el-form>
        <el-dialog
          title="选择所在位置"
          :visible.sync="dialogVisible"
          modal-append-to-body
          append-to-body
          fullscreen
        >
          <location ref="mark" :map-data="mapData" />
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="setPoi">确 定</el-button>
          </span>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="显示属性管理" name="second">
        <el-table
          border
          :data="rtuPortDisplays"
          style="width: 100%"
        >
          <el-table-column
            prop="name"
            label="名称"
            align="center"
          >
            <template #default="{row}">
              <el-input v-model.trim="row.name" placeholder="名称" clearable />
            </template>
          </el-table-column>
          <el-table-column
            prop="kunit"
            label="系数"
            align="center"
          >
            <template #default="{row}">
              <el-input-number v-model.trim="row.kunit" controls-position="right" placeholder="系数" />
            </template>
          </el-table-column>
          <el-table-column
            prop="idx"
            label="排序"
            align="center"
          >
            <template #default="{row}">
              <el-input-number v-model="row.idx" controls-position="right" :min="1" placeholder="排序" />
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="显示趋势"
            align="center"
          >
            <template #default="{row}">
              <el-switch
                v-model="row.censusable"
                :active-value="1"
                :inactive-value="0"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="是否显示"
            align="center"
          >
            <template #default="{row}">
              <el-switch
                v-model="row.show_state"
                :active-value="1"
                :inactive-value="0"
              />
            </template>
          </el-table-column>
        </el-table>
        <div class="h12" />
        <el-button type="primary" @click="updateRtuPortDisplays">提交</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ImgUpload from '@/components/ImgUpload'
import Location from '@/components/Location'
import UploadMixin from '@/mixin/UploadMixin'
import { mapGetters } from 'vuex'
export default {
  components: {
    ImgUpload,
    Location
  },
  mixins: [UploadMixin],
  props: {
    formData: {
      type: Object,
      default() {
        return {
          center: ''
        }
      }
    }
  },
  data() {
    return {
      activeName: 'first',
      dialogVisible: false,
      mapData: {
        center: [39.460508, 115.851289],
        zoom: 18
      },
      center: '',
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['project']),
    rtuPortDisplays() {
      return this.formData.rtu_port_displays || this.formData.rtuPortDisplays || []
    }
  },
  watch: {
    formData: {
      handler(newVal, oldVal) {
        const lat = this.formData.lat || this.project.lat
        const lng = this.formData.lng || this.project.lng
        const center = [lat, lng]
        this.center = center.join(',')
        this.mapData.center = center
      },
      deep: true,
      immediate: true
    },
    'center': {
      handler(newVal) {
        const latlngs = newVal.split(',')
        this.formData.lat = latlngs[0]
        this.formData.lng = latlngs[1]
      }
    }
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const formData = {
            serialno: this.formData.serialno,
            name: this.formData.name,
            picture: this.formData.picture,
            lat: this.formData.lat,
            lng: this.formData.lng,
            descri: this.formData.descri,
            map_show: this.formData.map_show
          }
          this.$emit('submit', formData)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    reset(formName) {
      this.$refs[formName].resetFields()
    },
    openPoiContainer() {
      this.dialogVisible = true
    },
    setPoi() {
      const gps = this.$refs.mark.getLocation()
      const lat = gps.lat.toFixed(6)
      const lng = gps.lng.toFixed(7)
      this.formData.center = [lat, lng]
      this.center = [lat, lng].join(',')
      this.formData.latlng = this.formData.center.join(',')

      this.dialogVisible = false
    },
    updateRtuPortDisplays() {
      if (this.rtuPortDisplays.filter((val) => {
        return val.name.length === 0
      }).length > 0) {
        this.$message.error('属性名称不能有空值')
        return
      }
      this.$emit('updateRtuPortDisplays', this.rtuPortDisplays, this.formData.serialno)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
